<template>
    <a-form
            layout="inline"
            :model="formState"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed"
    >
        <a-form-item>
            <a-input v-model:value="formState.title" placeholder="标题">
                <template #prefix></template>
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-range-picker @change="onChangeTime" :locale="locale" v-model:value="formState.pickertime" show-time />
        </a-form-item>
        <a-form-item>
            <a-button type="primary" html-type="submit">
                查询
            </a-button>
        </a-form-item>
    </a-form>
  <a-table
  :columns="columns"
  :row-key="record => record.id"
  :data-source="list"
  :pagination="pagination"
  :loading="loading"
  @change="handleTableChange"
  >
    <template #bodyCell="{ column, text ,record}">
        <template v-if="column.dataIndex === 'user'">{{ text?text.nickname:'匿名'}}</template>
        <template v-if="column.dataIndex === 'title'">
            <router-link
                    :to="{ name: 'detail', params: { eventId: record.id }}"
                    v-html="highlightTitle(record.title)"></router-link>
        </template>
    </template>

  </a-table>
</template>

<script setup>
import axios from "axios";
import {ref,reactive,onMounted} from "vue";
import { computed } from 'vue';
import { usePagination } from 'vue-request';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
const columns = [{
  title: '标题',
  dataIndex: 'title',
  width: '20%',
}, {
  title: '搜索指数',
  dataIndex: 'searchIndex',
  sorter: true,
  width: '20%',
}, {
  title: '作者',
  dataIndex: 'user',
},
  {
    title: '创建时间',
    dataIndex: 'createTime',
  }];

const queryData = params => {
  return axios.get('/event/list', {
    params,
  });
};
const formState = reactive({
    title: '',
    pickertime:[],
    startTime:'',
    endTime:''
});

const onChangeTime =(time, timeString) =>{
    formState.startTime = timeString[0];
    formState.endTime = timeString[1];
}

const {
  data,
  run,
  loading,
  current,
  pageSize,
} = usePagination(queryData, {
  // formatResult: res => res.data.data.list,
  defaultParams: [
    {
      pageSize: 5,
    },
  ],
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
  },
});

const list = computed(() => data.value?.data.data.list || []);
const pagination = computed(() => ({
    total: data.value?.data.data.total,
    current: current.value,
    pageSize: pageSize.value,
    pageSizeOptions: ['3', '5', '10']
}));
const handleTableChange = (pag, filters, sorter) => {
  if(sorter.field == 'searchIndex'){
    sorter.field = 'search_index'
  }
  if(sorter.order == 'ascend'){
    sorter.order='asc'
  }else if(sorter.order == 'descend'){
    sorter.order='desc'
  }
  console.log("handleTableChange",filters)
  run({
      pageSize: pag.pageSize,
      pageNum: pag?.current,
      sort: sorter.field,
      order: sorter.order,
      title: formState.title,
      startTime:formState.startTime,
      endTime:formState.endTime
      // ...filters,
  });
};


const handleFinish = values => {
    handleTableChange({
        pageSize:pagination.pageSizeKey,
        current:1
    },{

    },{
        field:'',
        order:''
    })
};
const handleFinishFailed = errors => {
    console.log(errors);
};


const highlightTitle = (text) => {
    if(formState.title == ""){
        return text;
    }
    const regex = new RegExp(formState.title, 'g');
    return text.replace(regex, '<span style="color: hotpink; font-weight: bold;">' + formState.title + '</span>');
}
</script>

<style scoped>

</style>